 new Vue({
            el: '#app',
            data() {
                return {
                    products: [
                        { name: '商品1', code: '001', price: 10.00, quantity: 1 },
                        { name: '商品2', code: '002', price: 20.00, quantity: 1 }
                    ],
                    activeName: '',
                    selectedDiscount: 1,
                    discountTitle: "添加优惠",
                    discountOptions: [
                        { label: "9.5折", value: 0.95, selected: false },
                        { label: "9折", value: 0.9, selected: false },
                        { label: "8.5折", value: 0.85, selected: false },
                        { label: "8折", value: 0.8, selected: false },
                        { label: "7.5折", value: 0.75, selected: false },
                        { label: "7折", value: 0.7, selected: false },
                    ],
                    displayNumber: '请输入金额',
                    showProducts: false,
                    orders: [
                        {
                            items: [
                                { name: '商品A', quantity: 2, price: 50 },
                                { name: '商品B', quantity: 1, price: 30 }
                            ]
                        },
                        {
                            items: [
                                { name: '商品C', quantity: 2, price: 50 },
                            ]
                        },
                        {
                            items: [
                                { name: '商品A', quantity: 2, price: 50 },
                                { name: '商品B', quantity: 1, price: 30 }
                            ]
                        },
                        {
                            items: [
                                { name: '商品A', quantity: 2, price: 50 },
                                { name: '商品B', quantity: 1, price: 30 }
                            ]
                        },
                    ],
                    isPopupVisible: false,
                    pay: [
                        { icon: '../../admin/images/money.png', text: '现金', content: 'Content for Option 1' },
                        { icon: '../../admin/images/Alipay.png', text: '支付宝', content: 'Content for Option 2' },
                        { icon: '../../admin/images/Wechat.png', text: '微信', content: 'Content for Option 3' },
                        { icon: '../../admin/images/BankCards.png', text: '银行卡', content: 'Content for Option 4' }
                    ]
                }

            },
            mounted() {
                this.getMove();
            },
            computed: {
                totalQuantity() {
                    return this.products.reduce((total, product) => total + product.quantity, 0);
                },
                totalPrice() {
                    return this.products.reduce((total, product) => total + (product.price * product.quantity), 0).toFixed(2);
                },
                discount() {
                    return (this.totalPrice * (1 - this.selectedDiscount)).toFixed(2);
                },
                total() {
                    return (this.totalPrice - this.discount).toFixed(2);
                },
            },
            methods: {
                getMove() {
                    var popup = document.querySelector("#popup")
                    var title = document.querySelector('#title')
                    title.addEventListener('mousedown', function (e) {
                        var x = e.clientX - popup.offsetLeft;
                        var y = e.clientY - popup.offsetTop;
                        document.addEventListener('mousemove', move)
                        function move(e) {
                            popup.style.left = e.clientX - x + 'px';
                            popup.style.top = e.clientY - y + 'px';
                            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                        }
                        // 选项框取消移动
                        title.addEventListener('mouseup', function () {
                            document.removeEventListener('mousemove', move);
                        })
                    })

                    title.addEventListener('selectstart', function (e) {
                        e.preventDefault();
                    })
                },
                incrementQuantity(index) {
                    this.products[index].quantity++;
                },
                decrementQuantity(index) {
                    if (this.products[index].quantity > 1) {
                        this.products[index].quantity--;
                    }
                },
                formatPrice(row, column, cellValue) {
                    return '¥ ' + cellValue.toFixed(2);
                },
                deleteProduct(row) {
                    this.products.splice(this.products.indexOf(row), 1);
                },
                clearProducts() {
                    this.products = [];
                },
                handleChange(row) {
                    console.log(row.quantity);
                },
                toggleDiscountStatus() {
                    this.discountTitle = this.discountTitle === "添加优惠" ? "取消优惠" : "添加优惠";
                    if (this.discountTitle === "添加优惠") {
                        this.selectedDiscount = 1;
                    }
                },
                updateDiscount(value) {
                    this.selectedDiscount = value;
                },
                showCalculator() {
                    document.getElementById("normalContent").style.display = "none";
                    document.getElementById("calculatorContent").style.display = "block";
                },
                hideCalculator() {
                    document.getElementById("normalContent").style.display = "block";
                    document.getElementById("calculatorContent").style.display = "none";
                },
                appendToDisplay(value) {
                    if (this.displayNumber === '请输入金额') {
                        this.displayNumber = value.toString();
                    } else {
                        this.displayNumber += value.toString();
                    }
                },
                deleteLastCharacter() {
                    this.displayNumber = this.displayNumber.slice(0, -1);
                    if (this.displayNumber === '') {
                        this.displayNumber = '0';
                    }
                },
                removeOrder(index) {
                    this.orders.splice(index, 1);
                },
                getTotalItems(order) {
                    let total = 0;
                    order.items.forEach(item => {
                        total += item.quantity;
                    });
                    return total;
                },
                clearOrders() {
                    this.orders = [];
                },
                goBack() {
                    this.showProducts = false;
                },
                getTotalPrice(order) {
                    let totalPrice = order.items.reduce((acc, item) => acc + (item.price * item.quantity), 0);
                    return totalPrice;
                },
                showPopup() {
                    this.isPopupVisible = true;
                },
                hidePopup() {
                    this.isPopupVisible = false;
                },
                showContent(index) {
                    this.selected = index;
                }
            }
        });